/**
 * Created by zhulingxiao on 2017/6/7.
 */
import React from 'react';

import { Icon, Popconfirm, Modal, Input, Form, Button } from 'antd';

const FormItem = Form.Item;

//自定义组件
import Table from '../../components/table';
import UpdateModal from '../../components/updateModal';

export default class Menu extends React.Component{

  state = {
    modalKey:'',//设置随机key销毁modal,
    visible:false,
    addMenu:{},
    isSecond:true,
    modalName:''

  }

  addMenu = (record) => {

    if(record){

      this.setState({
        visible:true,
        isSecond:true,
        modalName:'添加子菜单',
        addMenu:Object.assign({},this.state.addMenu,{
          parentid:record.sysID,
        })
      })

    }else {

      this.setState({
        visible:true,
        isSecond:false,
        modalName:'添加一级菜单'
      })

    }
  }

  handleOk = () => {

    this.props.addMenu(this.state.addMenu);

    this.handleCancel();

  }

  handleCancel = () => {

    this.setState({
      visible:false,
      addMenu:{}
    })

  }

  changeVal = (e) => {

    switch(e.target.name){

      case 'title':

        this.setState({
          addMenu:Object.assign({},this.state.addMenu,{
            title:e.target.value
          })
        })

        break;

      case 'link':

        this.setState({
          addMenu:Object.assign({},this.state.addMenu,{
            link:e.target.value
          })
        })

        break;

      case 'index':

        this.setState({
          addMenu:Object.assign({},this.state.addMenu,{
            index:e.target.value
          })
        })

        break;

      case 'icon':

        this.setState({
          addMenu:Object.assign({},this.state.addMenu,{
            icon:e.target.value
          })
        })

        break;

      default:

        this.setState({
          addMenu:Object.assign({},this.state.addMenu,{
            qx:e.target.value
          })
        })

    }

  }

  /////更新菜单////////////////////////////////

  updateMenu = (title, parentid, link, icon, qx, index, sysid) => {

    this.setState({
      modalKey:Math.random()
    })

    this.props.openModal(title, parentid, link, icon, qx, index, sysid);

  }

  deleteMenu = (id) => {

    this.props.deleteMenu(id);

  }

  componentWillMount(){

    this.props.onFetch();

  }


  render(){

    const columns = [
      {
        title: '名称',
        dataIndex: 'title',
        key: 'title',
        width:'20%',
        render:(text, record) => {

          return <span>{ record.index } : { text }</span>

        }
      }, {
        title: '路由',
        dataIndex: 'link',
        key: 'link',
        width:'20%',
        render: (text, record) => {

          if(!record.parentid){

            return(

              <span style={{ color:'#b0b0b0' }}>
                <Icon type="close-square-o" />
                <span style={{ marginLeft:'10px' }}>一级菜单没有路由</span>
              </span>

            )

          }

          return <span>{ text }</span>

        }
      },
      {
        title: '图标名称',
        dataIndex: 'icon',
        key: 'icon',
        width:'20%',
        render: (text, record) => {

          if(record.parentid){

            return(

              <span style={{ color:'#b0b0b0' }}>
                <Icon type="close-square-o" />
                <span style={{ marginLeft:'10px' }}>二级菜单没有图标</span>
              </span>

            )

          }

          return <span>{ text }</span>

        }
      },
      {
        title: '权限',
        dataIndex: 'qx',
        key: 'qx',
        width:'20%',
        render: (text, record) => {

          if(!record.parentid){

            if(text == 1){

              return <span>管理员</span>

            }

            return <span>全部</span>

          }

          return (

            <span style={{ color:'#b0b0b0' }}>
                <Icon type="close-square-o" />
                <span style={{ marginLeft:'10px' }}>二级菜单权限同一级</span>
            </span>

          )

        }
      },
      {
        title: '操作',
        key: 'action',
        width:'20%',
        render: (text, record) => {

          return(

            <span>

              <Popconfirm title="确定要删除此菜单吗?" onConfirm={()=>this.deleteMenu(record.sysID)} okText="确定" cancelText="取消">
                <a href="#">删除</a>
              </Popconfirm>

              <span className="ant-divider" />

              <a onClick={()=>this.updateMenu(record.title, record.parentid, record.link, record.icon, record.qx, record.index, record.sysID)}>修改</a>

                { !record.parentid &&

                  <span>
                    <span className="ant-divider" />
                    <a onClick={()=>this.addMenu(record)}>添加子菜单</a>
                  </span>

                }

            </span>

          )
        }
      }
    ];

    return(

      <div>

        <Button type="primary" style={{ marginBottom:'15px' }} onClick={()=>this.addMenu(false)}>添加一级菜单</Button>

        <Modal
          title={this.state.modalName}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >

          <Form>

            <FormItem
              label="名称"
              hasFeedback
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 12 }}
            >

              <Input value={this.state.addMenu.title} onChange={this.changeVal} name="title"/>

            </FormItem>

            {

              this.state.isSecond &&

              <FormItem
                label="路由"
                hasFeedback
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 12 }}
              >

                <Input value={this.state.addMenu.link} onChange={this.changeVal} name="link"/>

              </FormItem>

            }

            <FormItem
              label="序号"
              hasFeedback
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 12 }}
            >

              <Input type="number" value={this.state.addMenu.index} onChange={this.changeVal} name="index"/>

            </FormItem>

            {

              !this.state.isSecond &&

              <div>

                <FormItem
                  label="权限"
                  hasFeedback
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 12 }}
                >

                  <Input type="number" value={this.state.addMenu.qx} onChange={this.changeVal} name="qx"/>

                </FormItem>

                <FormItem
                  label="图标"
                  hasFeedback
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 12 }}
                >

                  <Input value={this.state.addMenu.icon} onChange={this.changeVal} name="icon"/>

                </FormItem>

              </div>

            }

          </Form>


        </Modal>

        <UpdateModal data={this.props} key={this.state.modalKey} update={this.props.updateMenu}/>

        <Table data={this.props.sideMenu} columns={columns} pagination={false} loading={this.props.tableLoading}/>

      </div>

    )

  }

}
